<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  import initRouter from './router/getAsyncRouter'

  export default {
      name: "App",
      created() {
          //在页面加载时读取sessionStorage里的状态信息
          if (sessionStorage.getItem('store')) {
              this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
          }

          //在页面刷新时将vuex里的信息保存到sessionStorage里
          window.addEventListener('beforeunload', () => {
              sessionStorage.setItem('store', JSON.stringify(this.$store.state));
          });

          //加载动态路由
          if (this.$store.state.routerData) {
              const arr = JSON.parse(JSON.stringify(this.$store.state.routerData.map(item => {
                  item.children = null
                  return item
              })))
              initRouter(arr)
          }

          //清空标签栏
          this.$store.state.tags = []
          const routeItem = {}
          if (this.$route.path !== "/welcome" && this.$route.path !== "/login") {
              for (let item of this.$store.state.routerData) {
                  if (item.path === this.$route.path) {
                      routeItem.name = item.cpn
                      routeItem.path = item.path
                      routeItem.title = item.title
                  }
              }
              this.$route.name !== "home" && this.$store.state.tags.push(routeItem)
          }
      }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    height: 100vh;
  }

  body {
    margin: 0;
    padding: 0;
  }
</style>
